<template>
	<div class="patient">
		<el-row>
			<el-col>
        <el-date-picker
          style="width:230px;"
          v-model="params.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
					value-format="yyyy-MM-dd"
          :picker-options="pickerOptions2">
        </el-date-picker>
				<el-select v-model="params.status" @change="getList" placeholder="请选择订单状态" style="width:180px;">
					<el-option
						v-for="item in searchList"
						:key="item.id"
						:label="item.label"
						:value="item.value">
					</el-option>
				</el-select>
        <el-input
          style="width:200px;"
          placeholder="请输入支付手机号"
          clearable
          v-model="params.mobile">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
				<el-button @click="getList" class="search-btn" type="primary" icon="el-icon-search">搜索</el-button>
        <el-checkbox-group v-model="checkList" @change="getList" style="width:230px;display:inline-block">
          <el-checkbox label="使用优惠码"></el-checkbox>
          <el-checkbox label="使用邀请码"></el-checkbox>
        </el-checkbox-group>
			</el-col>
		</el-row>
		<el-row class="patient-table">
			<el-table
				:data="list"
				stripe
				:row-class-name="rowClassName"
				v-loading="tableLoading"
				header-row-class-name="table-header"
				empty-text=""
				:header-cell-style="tableHeaderObj"
				:cell-style="cellStyle"
				:max-height="tableHeight"
				@row-click="viewAccount"
				style="width: 100%; border: 1px solid #ebeef5">
				<el-table-column
					prop="clinic"
					label="机构ID"
					align="center">
				</el-table-column>
				<el-table-column
					prop="registered_key"
					label="注册KEY"
					min-width="210"
					align="center">
				</el-table-column>
				<el-table-column
					prop="pay_time"
					label="支付时间"
					min-width="160"
					align="center">
				</el-table-column>
				<el-table-column
					label="支付手机号"
					min-width="160"
					align="center">
					<template slot-scope="scope">
						<span >{{scope.row.mobile}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="购买版本"
					min-width="160"
					align="center">
					<template slot-scope="scope">
						{{scope.row.product_name}}（ ¥ {{scope.row.product_price}} ）
					</template>
				</el-table-column>
				<el-table-column
					label="实付金额"
					width="80"
					prop="pay_price"
					align="center">
				</el-table-column>
				<el-table-column
					label="优惠码"
					min-width="160"
					align="center">
					<template slot-scope="scope">
						<span>{{scope.row.coupon_code?scope.row.coupon_code:'-'}}</span>
					</template>
				</el-table-column>
        <el-table-column
					label="邀请码"
					min-width="120"
					align="center">
					<template slot-scope="scope">
						<span>{{scope.row.invite_code?scope.row.invite_code:'-'}}</span>
					</template>
				</el-table-column>
        <el-table-column
					label="订单状态"
					prop=""
					min-width="120"
					align="center">
					<template slot-scope="scope">
						<span class="color-blue" v-if="scope.row.order_status==='已注册'">{{scope.row.order_status}}</span>
						<span class="color-red" v-else-if="scope.row.order_status==='已退款'||scope.row.order_status==='申请退款'||scope.row.order_status==='退款中'">{{scope.row.order_status}}</span>
						<span v-else>{{scope.row.order_status}}</span>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					min-width="120"
					align="center">
					<template slot-scope="scope">
						<span v-if="scope.row.order_status==='申请退款'">
							<span class="color-blue" @click.stop="refundBtn(scope.row)">退款</span>
							<span class="color-red" @click.stop="rejectBtn(scope.row)" style="margin-left:10px;">驳回</span>
						</span>
						<span v-else></span>
					</template>
				</el-table-column>
			</el-table>
			<div class="list-page">
				<el-pagination v-if="totalCount>10"
											 background
											 layout="total, slot, prev, pager, next"
											 :total="totalCount"
											 @current-change="handleCurrentChange">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
				<el-pagination v-else
											 background
											 layout="total, slot"
											 :total="totalCount">
					<span class="el-pagination__total page-span">记录</span>
				</el-pagination>
			</div>
		</el-row>
		<!--查看dialog-->
		<el-dialog
			title=""
			class="task-dialog"
			:visible.sync="dialogViewAccount"
			width="480px"
			:show-close="false"
			:modal="true"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			top="15vh">
			<div class="task-dialog-header">
				<div class="header-left">
					订单详情
				</div>
				<div class="header-right">
					<el-button size="small" @click="closeDialog">关闭</el-button>
				</div>
				<div class="clearfix"></div>
			</div>
			<div class="task-dialog-title"></div>
			<div class="form-wrap" v-if="dialogViewAccount">
				<el-scrollbar>
					<el-form :model="row" class="card-form" label-width="100px">
						<el-col :span="24">
							<el-form-item label="机构ID：" class="card-item-1">
								<span>{{row.clinic}}</span>
							</el-form-item>
							<el-form-item label="注册KEY：" class="card-item-1 account-mobile">
								<span>{{row.registered_key}}</span>
							</el-form-item>
							<el-form-item label="支付时间：" class="card-item-1">
								<span>{{row.pay_time}}</span>
							</el-form-item>
							<el-form-item label="支付手机号：" class="card-item-1">
								<span>{{row.mobile}}</span>
							</el-form-item>
							<el-form-item label="购买版本：" class="card-item-1">
								<span>{{row.product_name}}（ ¥ {{row.product_price}} ）</span>
							</el-form-item>
							<el-form-item label="实付金额：" class="card-item-1">
								<span class="color-blue">{{row.pay_price}}</span>
							</el-form-item>
							<el-form-item label="订单状态：" class="card-item-1">
								<span class="color-red">{{row.order_status}}</span>
							</el-form-item>
						</el-col>
						<el-col>
							<span class="code-line"></span>
							<el-form-item label="优惠码：" class="card-item-1">
								<span>{{row.coupon_code?row.coupon_code:'-'}}</span>
							</el-form-item>
							<el-form-item label="邀请码：" class="card-item-1">
								<span>{{row.invite_code?row.invite_code:'-'}}</span>
							</el-form-item>
							<span class="code-line"></span>
						</el-col>
						<el-col>
							<el-form-item label="注册时间：" class="card-item-1">
								<span>{{row.registered_time}}</span>
							</el-form-item>
							<el-form-item label="退款时间：" class="card-item-1">
								<span>{{row.refund_time?row.refund_time:'-'}}</span>
							</el-form-item>
							<el-form-item label="退款原因：" class="card-item-1">
								<span>{{row.refund_reason?row.refund_reason:'-'}}</span>
							</el-form-item>
						</el-col>
						<div class="clearfix"></div>
					</el-form>
				</el-scrollbar>
			</div>
		</el-dialog>
		<!-- 退款弹窗 -->
		<el-dialog
			title="退款确认"
			:visible.sync="refundDialog"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			width="30%">
			<span>是否确认退款？</span>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="refundDialog = false">取 消</el-button>
				<el-button size="small" type="primary" @click="refundDialogSure" :disabled="refundBtnStatus">退 款</el-button>
			</span>
		</el-dialog>
		<!-- 驳回弹窗 -->
		<el-dialog
			title="驳回确认"
			:visible.sync="rejectDialog"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			width="30%">
			<span>驳回前，请确定已电话告知用户驳回原因，并取得用户认同。</span>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" @click="rejectDialog = false">取 消</el-button>
				<el-button size="small" type="danger" @click="rejectDialogSure">驳 回</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<style scoped>
	/* 滚动条 */
	.el-row /deep/ .el-table .refund-row div, .refund-row span{
		color: #c0c4cc!important;
	}
	.form-wrap {
		height: 50vh;
	}
	.el-scrollbar {
		height:100%;
	}
	.form-wrap /deep/ .el-scrollbar .el-scrollbar__wrap {
		overflow-x: hidden;
	}
	.color-blue {
		color: #409eff;
	}
	.patient{
		position:relative;
		height:100%;
	}
	.search-input{
		width:320px;
	}
	.search-btn{
		margin-left:15px;
		margin-right:15px;
	}
	.add-btn{
		margin-right:50px;
	}
	.high-search{
		font-size:14px;
		color:#409eff;
		cursor: pointer;
	}
	.high-search i{
		margin-left:5px;
	}
	.patient-table{
		height:calc(100vh - 220px);
		margin-top:40px;
	}
	.list-page{
		text-align: center;
		position:absolute;
		bottom:0px;
		left:50%;
		transform:translateX(-50%);
		margin-top:20px;
	}
	.page-span{
		margin-left:-14px;
		font-size:13px;
		margin-right:20px;
	}
	.color-red{
		color: #f56c6c!important;
	}
	.color-b{
		color:#409EFF!important;
		cursor: pointer;
	}
	.block-row{
		height:55px;
	}
	.task-dialog >>> .el-dialog {
		/*height: 580px;*/
		overflow: auto;
		margin-top: 15vh!important;
	}
	.task-dialog >>> .el-dialog__header{
		padding:10px 20px 10px;
	}
	.task-dialog-header {
		padding: 0 30px;
		margin-bottom: 10px;
	}
	.task-dialog-header .header-left {
		float: left;
		font-weight: bold;
		font-size: 16px;
		line-height: 44px;
	}
	.task-dialog-header .header-right {
		float: right;
		clear: right;
	}
	.task-dialog-header .header-right >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
		margin-top:6px;
	}
	.task-dialog-title {
		height:4px;
		background-color: #f5f7fa;
		padding: 0 30px;
		margin-bottom: 20px;
	}
	.task-dialog >>> .el-dialog__body{
		padding:10px 0 20px;
	}
	.card-form .card-item-1{
		padding:0 30px;
		box-sizing: border-box;
	}
	.card-form .el-form-item {
		margin-bottom: 0!important;
	}
	.card-form .account-mobile span{
		display: block;
	}
	.card-form .rights-type-text{
		display: inline-block;
		margin-left:10px;
	}
	.card-form .card-item-1 >>> .el-input{
		width:220px;
	}
	.card-form >>> .el-form-item__label{
		text-align: left;
	}
	.card-form .key-info-left{
		width:50%;
		float:left;
	}
	.card-form .key-info-right{
		width:50%;
		float:right;
	}
	.card-form .key-info-right .picture-text{
		display: inline-block;
		width:100px;
		position:relative;
		top:-62px;
		line-height:22px;
		margin-left:27px;
	}
	.card-form .card-item-2{
		padding:0 0 0 30px;
		box-sizing: border-box;
	}
	.card-form .card-item-2 >>> .el-input{
		width:170px;
	}
	.card-form .card-item-3 >>> .el-input{
		width:572px;
	}
	.card-form .card-item-4 >>> .el-input{
		width:130px;
		margin-right:13px;
	}
	.card-form .card-item-5 >>> .el-input{
		width:210px;
	}
	.card-form .card-item-4 >>> .el-select:last-of-type .el-input{
		margin-right:0;
	}
	.card-form .birthday-text{
		display: inline-block;
		width: 30px;
		text-align: right;
	}
	.card-form >>> .el-form-item__label{
		padding:0;
	}
	.card-form >>> .el-form-item.is-required .el-form-item__label:before{
		letter-spacing: 0;
	}
	.card-form >>> .el-checkbox{
		width:110px;
	}
	.card-form >>> .el-checkbox+.el-checkbox{
		margin-left:0;
	}
	.patient >>> .el-table th.gutter{
		background-color:#f5f7fa;
	}
	.span-btn{
		color:#409EFF;
		cursor:pointer;
		margin-right:18px;
	}
	.span-btn:last-of-type{
		margin-right:0;
	}
	.authority-text{
		overflow:hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		width:165px;
		display: inline-block;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after{
		border-color: #fff;
	}
	.card-form >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{
		background-color:#a5c7ff;
		border-color:#a5c7ff;
	}
	.card-form >>> .el-checkbox__input.is-disabled+span.el-checkbox__label{
		color:#a5c7ff;
	}
	.reset-dialog >>> .el-dialog{
		border-radius:5px;
	}
	.reset-dialog >>> .el-button{
		width:80px;
		height:32px;
		padding:8px 0;
	}
	.reset-dialog >>> .el-dialog__body{
		padding-top:10px;
	}
	.reset-dialog >>> .el-form-item__label{
		text-align: left;
	}
	.reset-dialog >>> .el-form-item{
		margin-bottom:0;
	}
	.code-line {
		width: calc(100% - 60px);
		height: 1px;
		/* background: #ccc; */
		display: block;
		margin: 0 auto;
		border-top: 1px dashed #ccc;
	}
</style>
<script>
	import { orderList, orderSelect, orderDetail, refundOrder, rejectOrder } from '@/api/service'
	export default{
		data () {
			return {
				list: [],
				tableLoading: true,
				tableHeaderObj: {
					'background-color': '#f5f7fa',
					'color': '#606266',
					'height': '68px'
				},
				cellStyle: {
					'height': '68px',
					'cursor': 'pointer'
				},
				totalCount: 0,
				tableHeight: 0,
				page: {
					'per-page': 10,
					page: 1
				},
				pickerOptions2: {
					disabledDate(time) {
						return time.getTime() > Date.now()
					},
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
							picker.$emit('pick', [start, end])
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date()
							const start = new Date()
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
							picker.$emit('pick', [start, end])
						}
					}]
				},
				rowClassName: function(row, rowIndex) {
					if (row.row.order_status === '已退款') {
						return 'refund-row'
					} else {
						return ''
					}
				},
        checkList: [],
				searchList: [],
				row: {},
        params: {
          date: [],
          checkList: '',
          start_date: '',
          end_date: '',
          status: '',
          mobile: '',
          coupon_flag: '',
          invite_flag: ''
        },
				dialogViewAccount: false,
				refundDialog: false,
				rejectDialog: false,
				refundBtnStatus: false,
				rowData: {}
			}
		},
		created () {
			this.getList()
			this.getSelect()
		},
		mounted() {
			const that = this
			that.$nextTick(() => {
				that.tableHeight = document.documentElement.clientHeight - 280
			})
			window.onresize = () => {
				that.$nextTick(() => {
					that.tableHeight = `${document.documentElement.clientHeight}` - 280
				})
			}
		},
		methods: {
			// 获取列表
			getList() {
				this.tableLoading = true
				if (this.checkList.length === 0) {
          this.params.coupon_flag = ''
          this.params.invite_flag = ''
				} else if (this.checkList.length === 1) {
					if (this.checkList[0] === '使用优惠码') {
            this.params.coupon_flag = 1
          } else {
            this.params.coupon_flag = ''
          }
          if (this.checkList[0] === '使用邀请码') {
            this.params.invite_flag = 1
          } else {
            this.params.invite_flag = ''
					}
				} else {
            this.params.coupon_flag = 1
            this.params.invite_flag = 1
				}
        if (this.params.date) {
          this.params.start_date = this.params.date[0]
          this.params.end_date = this.params.date[1]
        } else {
					this.params.start_date = ''
					this.params.end_date = ''
				}
				orderList(Object.assign({}, this.page, this.params)).then(response => {
					this.tableLoading = false
					this.list = response.data.data
					this.totalCount = response.data._meta.totalCount
				})
			},
			getSelect() {
				orderSelect().then(response => {
					this.searchList = response.data
				})
			},
			handleCurrentChange(val) {
				this.page.page = val
				this.getList()
			},
			closeDialog () {
				this.dialogViewAccount = false
			},
			refundBtn(row) {
				this.rowData  = row
				this.refundDialog = true
			},
			refundDialogSure() {
				this.refundBtnStatus = true
				refundOrder({refund_id: this.rowData.refund_id}).then(response => {
					this.refundBtnStatus = false
					this.refundDialog = false
					this.$message({
						type: 'success',
						message: JSON.parse(response.request.response).msg
					})
					this.getList()
				}).catch(error => {
					this.refundBtnStatus = false
				})
			},
			rejectBtn(row) {
				this.rowData  = row
				this.rejectDialog = true
			},
			rejectDialogSure() {
				rejectOrder({refund_id: this.rowData.refund_id}).then(response => {
					this.rejectDialog = false
					this.$message({
						type: 'success',
						message: '驳回成功！'
					})
					this.getList()
				})
			},
			// 查看
			viewAccount(row, event, column) {
				orderDetail({registered_key: row.registered_key}).then(response => {
					this.row = response.data
				})
				this.dialogViewAccount = true
			}
		}
	}
</script>
